<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <span slot="before">共{{ total }}条记录</span>
        <template slot="after">
          <el-button size="small" type="warning" @click="$router.push('/import')">导入</el-button>
          <el-button size="small" type="danger" @click="exportExcel">导出</el-button>
          <el-button v-if="checkPrem('addEmployee')" size="small" type="primary" @click="isShowDialog=true">新增员工</el-button>
        </template>
      </page-tools>
      <!-- 放置表格和分页 -->
      <el-card>
        <el-table :data="employeeList" border>
          <el-table-column type="index" label="序号" sortable="" :index="customIndex" />
          <el-table-column prop="username" label="姓名" sortable="" />
          <el-table-column label="头像" width="200">
            <template #default="{row}">
              <img
                v-fixImg="require('@/assets/common/head.jpg')"
                :src="row.staffPhoto"
                class="avatar"
                alt=""
              >
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" sortable="" />
          <el-table-column prop="workNumber" label="工号" sortable="" />
          <!-- 格式化聘用形式 -->
          <el-table-column
            prop="formOfEmployment"
            label="聘用形式"
            sortable=""
            :formatter="formatEmployment"
          />
          <el-table-column prop="departmentName" label="部门" sortable="" />
          <el-table-column label="入职时间" sortable="">
            <template #default="{row}">
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" sortable="">
            <template #default="{row}">
              <!-- {{ row.enableState }} -->
              <el-switch
                v-model="row.enableState"
                :active-value="1"
                :inactive-value="0"
                disabled
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{row}">
              <el-button type="text" size="small" @click="$router.push('/employees/detail/'+ row.id)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="assignRole(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="delEmployees(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :current-page="pageConfig.page"
            layout="prev, pager, next"
            :total="total"
            :page-size="pageConfig.size"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>

      <!-- 新增员工弹窗 -->
      <addEmployees
        :is-show-dialog="isShowDialog"
        @closeDialog="isShowDialog=false"
        @loadPage="isLoadPage"
      />

      <!-- 分配角色弹窗 -->
      <AssignRole ref="assignRole" :is-show-dialog.sync="isShowRoleDialog" />
    </div>
  </div>
</template>

<script>
import { getEmployees, delEmployees } from '@/api/employee'
// 引入枚举数据
import employeeEnum from '@/api/constant/employees'
// 引入新增员工弹窗
import addEmployees from './components/add-employees.vue'
// 引入excel导出函数
import { export_json_to_excel } from '@/vendor/Export2Excel'
// 引入时间格式转换的函数
import { formatDate } from '@/filters'

import AssignRole from './components/assgin-role.vue'
export default {
  components: {
    addEmployees, AssignRole
  },
  data() {
    return {
      pageConfig: {
        page: 1,
        size: 3
      },
      employeeList: [], //  员工列表
      total: 0, // 总条数
      isShowDialog: false, //  是否显示弹窗
      isShowRoleDialog: false
    }
  },
  created() {
    this.loadPage()
  },
  methods: {
    // checkPrem(pointName) {
    //   const points = this.$store.state.user.profile.roles.points
    //   console.log(99999, points)
    //   return points.includes(pointName)
    // },
    // 分配角色
    async assignRole(id) {
      await this.$refs.assignRole.getRoleIds(id)
      this.isShowRoleDialog = true
    },
    // 自定义序列index
    customIndex(index) {
      // 索引会等于前面所有数据数量往下加
      // 比如第三页开始
      // 就会等于=2*每页的数量+index =>
      return (this.pageConfig.page - 1) * this.pageConfig.size + index + 1
    },
    // 获取员工列表
    async loadPage() {
      const { rows, total } = await getEmployees(this.pageConfig)
      this.total = total
      // console.log(600, res)
      this.employeeList = rows.map(item => {
        // 在这后端的数据和我们预期不一样, 可以造些假数据测试功能
        // 1. 日期希望是完整的日期字符串
        // 2. 账号状态希望有数据
        const date = new Date()
        return {
          ...item,
          timeOfEntry: date.toString()

        }
      })
    },

    // 切换页码触发的函数
    currentChange(newPage) {
      this.pageConfig.page = newPage //  点击页码, 更新当前页码
      // 更新页面
      this.loadPage()
    },

    // 格式化聘用形式
    formatEmployment(row, column, cellValue, index) {
      //  将所有可能性列举出来的数据格式, 叫做枚举
      // const hireType = [
      //   {
      //     id: 1,
      //     value: '正式工'
      //   },
      //   {
      //     id: 2,
      //     value: '临时工'
      //   }
      // ]

      // find()方法返回第一个满足过滤方法的元素，一个都没有满足的就返回undefined，遇到一个满足的元素后遍历就停止了
      const res = employeeEnum.hireType.find(item => Number(item.id) === Number(cellValue)) //  有可能不是数字1, 而是字符串1,  所以要强行转换成数字型, 进行比较
      // res有可能返回undefined, 用不存在的变量去.value, 会报错
      // 有可能存在除了枚举之外的形式,  可以用未知形式代替
      return res ? res.value : '未知形式'
    },

    // 删除员工
    async delEmployees(id) {
      try {
        await this.$confirm('是否确认删除???')
        await delEmployees(id)
        this.$message.success('删除成功')
        this.loadPage()
      } catch (error) {
        console.log(error)
      }
    },

    // 新增员工后更新页面
    isLoadPage() {
      // 计算最后一页
      // this.total = this.total + 1
      const pageNumber = Math.ceil(++this.total / this.pageConfig.size)
      console.log(172, this.total)
      console.log(169, pageNumber)
      this.currentChange(pageNumber)
    },

    // 导出excel
    async exportExcel() {
      // 1.获取员工数据
      const { rows } = await getEmployees({
        page: 1,
        size: this.total
      })
      console.log(1777, rows)

      // 字典
      const dict = {
        '手机号': 'mobile',
        '姓名': 'username',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }

      // 2.数据转换---因为excel导出用到的是二位数组, 而获取到的数据是数组套对象, 所以需要加工成数组套数组
      // 2.1 因为当前字段是英文的, 导出的excel的表头需要用中文的
      const header = Object.keys(dict)
      console.log('表头', header)

      // 2.2 根据表头将数据意义对应, 追加到一个数组中
      const data = rows.map(user => {
        const arr = []
        // 数据是要参考字典来获取数据
        for (const key in dict) {
          // console.log('中文key', key)
          // console.log('英文key', dict[key])
          // console.log('根据英文key找到的value', user[dict[key]])

          // 像聘用形式, 日期时间格式, 需要转换下
          if (dict[key] === 'formOfEmployment') {
            // 聘用形式--找出值
            const val = user[dict[key]]
            console.log(210000, val)
            const res = employeeEnum.hireType.find(item => item.id === val)
            arr.push(res ? res.name : '未知')
          } else if (dict[key] === 'timeOfEntry' || dict[key] === 'correctionTime') {
            // 时间
            // console.log(215555, user[dict[key]])
            const res = formatDate(user[dict[key]])
            arr.push(res)
          } else {
            arr.push(user[dict[key]])
          }
        }
        return arr
      })

      console.log('二维数组:', data)
      // 导出Excel
      export_json_to_excel({
        header,
        data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
}
</style>
